<template>
  <div class="music-player">
    <!-- 左侧导航 -->
    <aside class="sidebar">
      <div class="logo">🎵 炫酷音乐</div>
      <ul class="menu">
        <li
          v-for="(item, index) in navList"
          :key="index"
          :class="{ active: index === activeIndex }"
          @click="activeIndex = index"
        >
          <span class="icon">{{ item.icon }}</span>
          <span class="label">{{ item.label }}</span>
        </li>
      </ul>
    </aside>

    <!-- 主体内容区域 -->
    <main class="main">
      <section class="greeting">
        <h2>{{ greeting }}，推荐您喜欢的音乐</h2>
      </section>

      <section class="songs">
        <div v-for="song in displayedSongs" :key="song.id" class="song-card">
          <div
            class="cover-container"
            :class="{ spinning: currentSong?.id === song.id && isPlaying }"
          >
            <img :src="song.cover" class="cover" />
            <button
              class="play-button"
              :class="{ playing: currentSong?.id === song.id && isPlaying }"
              @click.stop="playSong(song)"
            >
              {{ currentSong?.id === song.id && isPlaying ? "⏸" : "▶" }}
            </button>
          </div>
          <div class="info">
            <p class="title">{{ song.title }}</p>
            <p class="artist">{{ song.artist }}</p>
          </div>
        </div>
      </section>

      <!-- 播放进度条 -->
      <div v-if="isPlaying" class="progress-bar">
        <div class="progress" :style="{ width: progress + '%' }"></div>
      </div>
    </main>

    <!-- 音频播放器 -->
    <audio
      ref="audioRef"
      :src="currentSong?.audioUrl"
      @ended="onSongEnd"
      @canplay="audioRef?.play()"
      style="display: none"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onBeforeUnmount } from "vue";

const greeting = computed(() => {
  const hour = new Date().getHours();
  if (hour >= 5 && hour < 12) return "早上好";
  if (hour >= 12 && hour < 14) return "中午好";
  if (hour >= 14 && hour < 18) return "下午好";
  return "晚上好";
});

interface Song {
  id: number;
  title: string;
  artist: string;
  cover: string;
  audioUrl: string;
}

const navList = [
  { label: "推荐", icon: "🏠" },
  { label: "精选", icon: "✨" },
  { label: "播客", icon: "📻" },
  { label: "漫游", icon: "🌏" },
  // { label: "关注", icon: "👀" },
];

const activeIndex = ref(0);

const songList: Song[] = [
  {
    id: 1,
    title: "西楼爱情故事",
    artist: "冰洁",
    cover:
      "https://img2.baidu.com/it/u=4183841430,4254789304&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500",
    audioUrl:
      "https://er-sycdn.kuwo.cn/6c1cc6b82dc988f9c029c65421b9423f/68089334/resource/30106/trackmedia/M800001VRjkc1z7nuZ.mp3",
  },
  {
    id: 2,
    title: "告白气球",
    artist: "周杰伦",
    cover:
      "https://img1.baidu.com/it/u=3172004600,926275357&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=707",
    audioUrl:
      "https://er-sycdn.kuwo.cn/cc1892e9262a2964c9c10e6fd384f43c/680895b7/resource/30106/trackmedia/M800003iDY5m2TZxW6.mp3",
  },
  {
    id: 3,
    title: "刚好遇见你",
    artist: "小瑞",
    cover:
      "https://img0.baidu.com/it/u=2687026608,3825326235&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=710",
    audioUrl:
      "https://er-sycdn.kuwo.cn/707ec5a1ef6fd2d829cb92d5ae5d7ab8/680895f4/resource/30106/trackmedia/M500003gIlGK3T7YST.mp3",
  },
];

const selectedSongs: Song[] = [
  {
    id: 4,
    title: "难道爱一个人有错吗",
    artist: "郑源",
    cover:
      "https://img1.baidu.com/it/u=3930917678,1262460073&fm=253&fmt=auto&app=120&f=JPEG?w=361&h=480",
    audioUrl:
      "https://er-sycdn.kuwo.cn/093cebdbde7489a1c53372a53963d4bc/6808a65f/resource/30106/trackmedia/M500001jfUDR2gHc7q.mp3",
  },
  {
    id: 5,
    title: "东风破",
    artist: "周杰伦",
    cover:
      "https://img0.baidu.com/it/u=2493823832,1569723558&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889",
    audioUrl:
      "https://er-sycdn.kuwo.cn/a47e38a40a48e47b747a60fb6222af8b/6808a686/resource/30106/trackmedia/M500000iiJxe1kMUuH.mp3",
  },
];

const podcastSongs: Song[] = [
  {
    id: 6,
    title: "月半小夜曲",
    artist: "李克勤",
    cover:
      "https://img1.baidu.com/it/u=1300055780,3553142976&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    audioUrl:
      "https://lx-sycdn.kuwo.cn/7a005d0094392e3544ff82ec4c575314/6808a22b/resource/n1/9/28/2264341845.mp3",
  },
  {
    id: 7,
    title: "我们的回忆",
    artist: "小涛",
    cover:
      "https://img0.baidu.com/it/u=735366850,1291189164&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500",
    audioUrl:
      "https://er-sycdn.kuwo.cn/f527cf4e677ca1f84e67748a46705b03/6808a082/resource/30106/trackmedia/M500002IaYon3qtCC6.mp3",
  },
];

const attention: Song[] = [
  {
    id: 8,
    title: "想见见不到",
    artist: "刘阳阳",
    cover:
      "https://img0.baidu.com/it/u=4024102819,2747910486&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667",
    audioUrl:
      "https://er-sycdn.kuwo.cn/a5d07eda076b95ccaa88d5304c75882c/6808a574/resource/30106/trackmedia/M500002s79tX0EjYmi.mp3",
  },
  {
    id: 9,
    title: "我们的回忆",
    artist: "小涛",
    cover:
      "https://img1.baidu.com/it/u=4168304586,67976406&fm=253&fmt=auto&app=138&f=JPEG?w=502&h=500",
    audioUrl:
      "https://lx-sycdn.kuwo.cn/0942378475427a02dfa1fa2bb139c0a0/6808a5bc/resource/n1/81/13/3033024406.mp3",
  },
];
const audioRef = ref<HTMLAudioElement | null>(null);
const currentSong = ref<Song | null>(null);
const isPlaying = ref(false);
const progress = ref(0);
let progressTimer: number | null = null;

const displayedSongs = computed(() => {
  switch (activeIndex.value) {
    case 0: // 推荐
      return songList;
    case 1: // 精选
      return selectedSongs;
    case 2: // 播客
      return podcastSongs;
    default:
      return attention;
  }
});

const playSong = (song: Song) => {
  if (!audioRef.value) return;

  if (currentSong.value?.id !== song.id) {
    currentSong.value = song;
    isPlaying.value = true;
    progress.value = 0;
    audioRef.value.src = song.audioUrl;
    audioRef.value.load();
  } else {
    if (isPlaying.value) {
      audioRef.value.pause();
      isPlaying.value = false;
    } else {
      audioRef.value.play();
      isPlaying.value = true;
    }
  }

  startProgressTracking();
};

const startProgressTracking = () => {
  if (progressTimer) clearInterval(progressTimer);
  progressTimer = window.setInterval(() => {
    if (audioRef.value && audioRef.value.duration) {
      progress.value =
        (audioRef.value.currentTime / audioRef.value.duration) * 100;
    }
  }, 500);
};

const onSongEnd = () => {
  isPlaying.value = false;
  progress.value = 0;
  if (progressTimer) clearInterval(progressTimer);
};

onBeforeUnmount(() => {
  if (progressTimer) clearInterval(progressTimer);
});
</script>

<style scoped>
/* Your existing styles */
</style>




<style scoped>
.music-player {
  display: flex;
  height: 100vh;
  background: linear-gradient(135deg, #1e1e1e, #121212);
  color: #fff;
  font-family: "Arial", sans-serif;
  overflow: hidden;
}

.sidebar {
  width: 200px;
  background: #111;
  padding: 20px;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5);
}

.logo {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 30px;
  text-align: center;
}

.menu li {
  padding: 10px;
  cursor: pointer;
  border-radius: 6px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  transition: 0.3s;
}

.menu li.active,
.menu li:hover {
  background: #333;
}

.menu .icon {
  margin-right: 10px;
}

.main {
  flex: 1;
  padding: 30px;
  overflow-y: auto;
}

.greeting h2 {
  margin-bottom: 30px;
  font-size: 26px;
}

.songs {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}

.song-card {
  width: 200px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.song-card:hover {
  transform: scale(1.05);
}

.cover-container {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
  transition: 0.3s;
}

.cover-container.spinning img {
  animation: spin 6s linear infinite;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

.cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}

.play-button {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  color: #fff;
  font-size: 18px;
  padding: 6px 10px;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s ease;
}

.play-button.playing {
  background: #ff4b2b;
  transform: scale(1.1);
}

.info {
  margin-top: 10px;
}

.title {
  font-weight: bold;
}

.artist {
  font-size: 14px;
  color: #aaa;
}

.progress-bar {
  position: fixed;
  bottom: 0;
  left: 200px;
  right: 0;
  height: 4px;
  background: #444;
}

.progress {
  height: 100%;
  background: linear-gradient(90deg, #ff416c, #ff4b2b);
  transition: width 0.3s ease;
}

/* 移动端样式调整 */
@media (max-width: 768px) {
  .music-player {
    flex-direction: column;
  }

  .sidebar {
    flex-direction: row;
    width: 100%;
    /* height: 60px; */
    padding: 0 10px;
    border-bottom: 1px solid #eee;
    overflow-x: auto;
    justify-content: space-around;
  }

  .sidebar .logo {
    display: none;
  }

  .menu {
    display: flex;
    /* flex-direction: row; */
    /* align-items: center; */
    /* gap: 20px; */
    padding: 0;
  }

  .menu li {
    padding: 10px;
    font-size: 12px;
  }

  .main {
    margin: auto;
  }

  .greeting h2 {
    font-size: 18px;
  }

  .songs {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .song-card .cover-container {
    width: 100%;
    height: auto;
  }

  .song-card .cover {
    width: 100%;
    /* height: auto; */
  }

  .song-card .info .title {
    font-size: 14px;
  }

  .song-card .info .artist {
    font-size: 12px;
  }

  .play-button {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  .progress-bar {
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
  }
}
</style>
